﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>用户登录</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/scripts/jquery-1.10.2.min.js"></script>
    <script src="~/scripts/bootstrap.min.js"></script>
    <script type="text/javascript">
        function Verify(name, message) {
            var txtname = $("#" + name + "").val();
            if (txtname.length <= 0) {
                //$("#" + name + "helper").show();
                $("#div_" + name + "").addClass("has-error").removeClass("has-success");
                $("#" + name + "helper").text(message);
                //$("#" + name + "helper").text(message);
            } else {
                $("#div_" + name + "").removeClass("has-error").addClass("has-success");
                $("#" + name + "helper").text("OK!");
                //$("#" + name + "helper").text("Ok!");
            }
        }
        $(function () {
            $("#LoginModal").on("click", "#Login-btn", function () {
                if ($("#username").val().length <= 0 || $("#password").val().length <= 0 || $("#securitycode").val().length <= 0) {
                    Info("请输入完整信息和正确的验证码");
                } else {
                    $("#LoginForm").submit();
                }
            });
        });
        //点击图片刷新验证码
        $(function () {
            $("#securityimg").click(function () {
                $("#securityimg").attr("src", "../Image.ashx?a=" + Math.random());
            });
        });
        //提示对话框，一框多用
        function Info(message) {
            $("#infoModal #message").text(message);
            $("#infoModal").modal("show");
        }
        $(function () {
            $("#LoginModal #username").val("test1");
            $("#LoginModal #password").val("123");
        })
    //    $(function () {
    //        $("#username").blur(function () {
    //            var txtname=$("#username").val();
    //            if (txtname.length <= 0) {
    //                $("#usernamehelper").show();
    //                $("#usernamehelper").text("用户名不能为空！");
    //            } else {
    //                $("#usernamehelper").hide();
    //            }
    //        });
    //});
        function NewPage() {
            window.open("https://www.firefox.com.cn/download/");
        }
    </script>
    <style type="text/css">
        .login-page {
            width: 100%;
            height: 100%;
            background: url(../images/loginbg.png) no-repeat center 0 #0083CB;
            min-height: 880px;
            min-width: 560px;
            position: relative;
        }
        .firefox {
            margin-right: 10px;
            margin-top: 5px;
            float: right;
            font-size: 18px;
            font-family: 'Times New Roman', Times, serif;
            color: white;
            font-weight:800;
        }
        .firefox:hover{
            cursor:pointer;
        }
    </style>
</head>
<body>
    @{
        @Html.Raw(ViewBag.Message)
    }
    <div class="login-page">
        <div class="firefox" onclick="NewPage()">
            推荐使用Firefox浏览器(1)
        </div>
        <div>
            <!-- Button trigger modal -->
            <button type="button" style="position:absolute;left:360px;top:310px;" id="LoginModal-btn" class="btn btn-light" data-toggle="modal" data-target="#LoginModal">
                进入系统
            </button>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="EmsModalLabel">
        <div class="modal-dialog" style="width:450px;" role="document">
            <div class="modal-content">
                <div class="modal-header" id="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="EmsModalLabel"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 欢迎登录</h4>
                </div>
                <div class="modal-body" id="EmsModalPreview">
                    @using (Html.BeginForm("Login", "Home", FormMethod.Post, new { id = "LoginForm" }))
                    {
                        @Html.AntiForgeryToken();
                        <div style="margin-left:40px;margin-right:40px;margin-top:10px;margin-bottom:10px;">
                            <div id="div_username" class="form-group">
                                <input type="text" name="username" id="username" onblur="Verify('username', '用户名不能为空')" class="form-control" aria-describedby="usernamehelper" placeholder="用户名" />
                                <small id="usernamehelper" class="help-block">&nbsp;</small>
                            </div>
                            <div id="div_password" class="form-group">
                                <input type="password" name="password" id="password" onblur="Verify('password', '密码不能为空')" class="form-control" aria-describedby="passwordhelper" placeholder="密码" />
                                <small id="passwordhelper" class="help-block">&nbsp;</small>
                            </div>
                            <div id="div_securitycode" class="form-group" style="width:220px;">
                                <input type="text" name="securitycode" id="securitycode" onblur="Verify('securitycode', '验证码不能为空')" class="form-control" aria-describedby="securitycodehelper" placeholder="验证码" />
                                <small id="securitycodehelper" class="help-block">&nbsp;</small>
                            </div>
                            <div style="position:absolute;top:56%;right:56px;">
                                <img src="../Image.ashx" @*onclick="javascript: this.src = '~/Image.ashx?aa=' + Math.random()"*@ id="securityimg" width="97" height="37" style="border:solid;border-width:1px;border-color:gray;border-radius:3px;" />
                            </div>
                            <div>
                                <button type="button" id="Login-btn" class="btn btn-success btn-block">登录</button>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="infoModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm" style="width:300px;" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#286090;height:40px;">
                    <h4 class="modal-title" style="position:absolute;top:10px;left:10px;color:white;">提示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="message" style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;font-size:medium"></p>
                </div>
                <div class="modal-footer" style="height:40px;">
                    <button type="button" class="btn btn-primary" style="position:absolute;right:10px;bottom:3px;" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
